<!-- v-html 和 v-text -->
 <template>
    <!-- v-text :会解析HTML标签-->
    <!-- 渲染 mesg 这个数据 -->
 <div v-text="mesg"></div>

   <!-- v-text是绑定一个值，而不是事件。因此，在v-text指令中，如果直接引用函数名而不调用，会得到函数本身而不是函数的返回值。 -->
   <!-- 引用add   调用add() -->
   <div v-text="showInfo()"></div>
   <!-- 错误使用：<div v-text="showInfo"></div>  这是引用-->


    <!-- v-html :会解析HTML标签-->
 <div v-html="html"></div>

    <!-- {{ }} 表达式 -->
 <div>{{ '<strong>立根原在破岩中</strong>' }}</div>

    <!-- 结论：从运行效果中可得出，{{ }}表达式的效果 和 v-text 相同 -->
    
 </template>
 
 <script setup>
       const mesg = '<strong>咬定青山不放松</strong>'
       const html = '<strong>立根原在破岩中</strong>' 

       //v-text是绑定一个函数值
       const showInfo = () =>{
         console.log("欢迎来到vue3")
       }
 </script>
 
 <style>
 
 </style>